/*
 * @Author: 张笑天
 * @Date: 2018-03-07 17:09:56
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-08-13 13:54:36
 */
import React from 'react';
import { inject, observer } from 'mobx-react';
import classNames from 'classnames';
import { Row, Col } from 'antd';
import { WeaDialog, WeaErrorPage, WeaTools, WeaNewScroll, WeaLocaleProvider } from 'ecCom';
import { WeaTableNew } from 'comsMobx';

const getLabel = WeaLocaleProvider.getLabel;

const { WeaTable } = WeaTableNew;
const { tryCatch } = WeaTools;

const store = [
  'routing',
  'emailMainStore',
];

@tryCatch(
  React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@ttymmi`} msg={props.error || getLabel(186, '对不起，该页面异常，请联系管理员！', 'error')} />,
  { error: '' },
)
@inject(...store)
@observer
class ReadList extends React.Component {
  static displayName = 'ViewReadList';
  constructor(props) {
    super(props);
    this.isInstanceMounted = false;
    this.prefixClass = 'wea-email-read-list';
  }
  componentDidMount() {
    this.isInstanceMounted = true;
  }
  componentWillReceiveProps() {
  }
  componentWillUnmount() {
    this.isInstanceMounted = false;
  }
  render() {
    const { emailMainStore: { unReadedListVisible, unReadedListId: mailId, viewStores, setState },
      } = this.props;
    const { readListTableStore, readListLoading, readListTableStore: { loading }, readListCount,
    getReadList, baseInfo: { originalMailId }, readListBtnSelected,
    setState: _setState } = viewStores[mailId];
    const _loading = readListLoading || loading;
    const colors = ['#3fc9d6', '#38b1ff', '#fe9637'];
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@0vredy`}
        className={`${this.prefixClass}-dialog`}
        icon="icon-coms-email"
        iconBgcolor="#a0b0ba"
        title={getLabel(31369, '阅读状态')}
        visible={unReadedListVisible}
        // style={{ width: 710, height: 570 }}
        style={{ width: 900, height: 570 }}
        onCancel={() => {
          setState({ unReadedListVisible: false });
          _setState({ readListBtnSelected: '' });
        }}
        maskClosable={false}
      >
        <div spinning={_loading} >
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5j9bbm`} className={this.prefixClass}>
            {
              readListCount.map(({ icon, count, label, key, selectKey: readed }, index) => (
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@yiqm41@${key}`}
                  span={8}
                  key={key}
                  className={
                  classNames({
                    [`${this.prefixClass}-btn`]: true,
                    [`${this.prefixClass}-btn-selected`]: readed === readListBtnSelected,
                  })
                }
                >
                  <div onClick={() => getReadList({ mailId, originalMailId, readed })
                    .setState({ readListBtnSelected: readed })}
                  >
                    <i className={icon || 'icon-email-Unread-o'} style={{ color: colors[index] }} />
                    <p style={{ color: colors[index] }}>{count}</p>
                    <p>{label}</p>
                  </div>
                </Col>
              ))
            }
          </Row>
          <div className={`${this.prefixClass}-table`}>
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@rc1n00`} height="100%">
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hp2sz4`} comsWeaTableStore={readListTableStore} />
            </WeaNewScroll>
          </div>
        </div>
      </WeaDialog>
    );
  }
}
export default ReadList;
